<template>
  <div class="content-container">
    <el-row class="header-filter four-border-blueBg" style="height: 50px;line-height: 50px;">
      <el-page-header :title="$t('public.back')" @back="handleBack" style="padding: 0;" :icon="ArrowLeft">
        <template #content>
          <span style="font-size: 14px;">{{ $t('quote.quoteList') }}</span>
        </template>
      </el-page-header>
    </el-row>
    <el-row class="header-filter four-border-blueBg">
      <el-col :span="16">
        <TextInput v-model="listParams.quotePerson" class="item" clearable
          :placeholder="g_t('travelAgency.quotePerson')" />
        <DateTimeLimit v-model="listParams.quoteStartTime" time-point-type="start"
          :time-boundary="listParams.quoteEndTime" :label="g_t('travelAgency.quoteStartTime')"
          style="margin-right: 10px;min-width: 190px; max-width: 190px;" />
        <DateTimeLimit v-model="listParams.quoteEndTime" time-point-type="end"
          :time-boundary="listParams.quoteStartTime" :label="g_t('travelAgency.quoteEndTime')"
          style="margin-right: 10px;min-width: 190px; max-width: 190px;" />
        <el-button type="primary" @click="handleQuery">{{
          $t('public.search')
          }}</el-button>
        <el-button plain @click="handleReset">{{
          $t('public.reset')
          }}</el-button>
      </el-col>
      <el-col :span="8" style="text-align: right;">
        <el-button type="primary" @click="handleCreate">+ {{ $t('public.create') }}</el-button>
      </el-col>
    </el-row>
    <div class="base-table-container">
      <BaseTable ref="refContentTable" v-loading="loading" :data="tableData" row-key="id">
        <TableColumn prop="name" :label="g_t('travelAgency.routeName')" :column-width="columnWidthObj.name" />
        <TableColumn prop="teamDate" :label="g_t('travelAgency.departureDate')" :column-width="columnWidthObj.teamDate">
          <template #default="{ row }">
            <span>{{
              row.teamDate
              ? g_dayjs(row.teamDate).format('YYYY-MM-DD HH:mm:ss')
              : '--'
              }}</span>
          </template>
        </TableColumn>
        <TableColumn prop="persons" :label="g_t('travelAgency.persons')" :column-width="columnWidthObj.persons" />
        <TableColumn prop="totalPrice" :label="g_t('travelAgency.totalPrice')"
          :column-width="columnWidthObj.totalPrice" />
        <TableColumn prop="avgPrice" :label="g_t('travelAgency.perCapitaPrice')"
          :column-width="columnWidthObj.avgPrice" />
        <TableColumn prop="quotePerson" :label="g_t('travelAgency.quotePerson')"
          :column-width="columnWidthObj.quotePerson" />
        <TableColumn prop="quoteTime" :label="g_t('travelAgency.quoteTime')" :column-width="columnWidthObj.quoteTime">
          <template #default="{ row }">
            <span>{{
              row.quoteTime
              ? g_dayjs(row.quoteTime).format('YYYY-MM-DD HH:mm:ss')
              : '--'
              }}</span>
          </template>
        </TableColumn>
        <TableColumn prop="action" fixed="right" :label="$t('public.action')" max-width="220"
          :column-width="columnWidthObj.action">
          <template #default="{ row }">
            <el-button text @click="handleDetail(row, 'view')">
              {{ $t('public.detail') }}
            </el-button>
            <el-button text @click="handleEdit(row)">
              {{ $t('public.edit') }}
            </el-button>
            <el-button text @click="handleDelete(row)">
              {{ $t('public.delete') }}
            </el-button>
          </template>
        </TableColumn>
      </BaseTable>
      <BasePagination v-model:page-size="listParams.pageSize" v-model:current-page="listParams.pageNum" :total="total"
        @change="getTableList()" />
    </div>
  </div>
</template>

<script setup>
import { ArrowLeft } from '@element-plus/icons-vue'
const route = useRoute()

const listParams = ref({
  "pageNum": 1,
  "pageSize": 10,
  "routeId": route.query.routeId || '',
  "teamId": route.query.teamId || '',
  "quotePerson": "",
  "quoteStartTime": "",//2025-11-10 10:00:00
  "quoteEndTime": ""
})
const total = ref(0)


const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const columnWidthObj = ref({})

onMounted(() => {
  getTableList()
})

const handleBack = () => {
  g_router.go(-1)
}

const getTableList = () => {
  loading.value = true
  tableData.value = []
  g_api.travelAgency
    .apiQuoteList(listParams.value)
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data.items || []
        total.value = data.total || 0
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const handleQuery = () => {
  getTableList()
}

const handleReset = () => {
  Object.assign(listParams.value, {
    pageNum: 1,
    pageSize: 10,
    quotePerson: '',
    quoteStartTime: '',
    quoteEndTime: ''
  })
  handleQuery()
}

const handleCreate = () => {
  g_router.push({
    path: '/travelAgency/quote/detail',
    query: { handleType: 'add', id: route.query.routeId || route.query.teamId, type: route.query.routeId ? 'route' : 'team' }
  })
}

const handleDetail = (row) => {
  g_router.push({
    path: '/travelAgency/quote/detail',
    query: { handleType: 'detail', id: route.query.routeId || route.query.teamId, type: route.query.routeId ? 'route' : 'team', quoteId: row.id }
  })
}

const handleEdit = (row) => {
  g_router.push({
    path: '/travelAgency/quote/detail',
    query: { handleType: 'edit', id: route.query.routeId || route.query.teamId, type: route.query.routeId ? 'route' : 'team', quoteId: row.id }
  })
}


const handleDelete = row => {
  g_utils
    .deleteConfirm()
    .then(() => {
      loading.value = true
      g_api.travelAgency
        .apiQuoteDelete(row.id)
        .then(res => {
          if (res.code === '200') {
            ElMessage.success('删除成功')
            handleQuery()
          }
        })
        .finally(() => {
          loading.value = false
        })
    })
    .catch(() => { })
}
</script>

<style lang="scss" scoped></style>